<template>
  <div>
    <el-form
      class="pf-mb-50"
      :col-count="3"
      :config="formConfig"
      :model="formInfo"
      @validate="validate"
      @blurEvent="blurEvent"
      @changeEvent="changeEvent"
      @focusEvent="focusEvent"
      @inputEvent="inputEvent"
      @changeFileEvent="changeFileEvent"
    ></el-form>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[100, 200, 300, 400]"
      :page-size="100"
      layout="total, sizes, prev, pager, next, jumper"
      :total="400"
    >
    </el-pagination>
    <pf-design></pf-design>
    <PfTest :title="'self-test: '"><span>i'm pf content </span></PfTest>
  </div>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref, Ref } from "vue";
import { FormModel } from "@packages/services/model/FormModel";
import { testForm, toFormValue } from "@/test-data/form";
import PfDesign from "@packages/design/index.vue";
import { useLocale } from "@packages/hooks/use-locale";

export default defineComponent({
  components: { PfDesign },
  props: {},
  setup() {
    useLocale();
    const formConfig: Ref<FormModel> = ref(testForm());
    const formInfo: Ref<any> = ref(toFormValue(formConfig.value));
    const changeEvent = (newV: any, prop: string) => {
      console.log("changeEvent", newV, prop);
    };
    const changeFileEvent = (file: any, fileList: any, prop: string) => {
      console.log("changeFileEvent", file, fileList, prop);
    };
    const blurEvent = (field: any) => {
      console.log("blurEvent", field, formInfo.value[field.prop]);
    };
    const focusEvent = (field: any) => {
      console.log("focusEvent", field, formInfo.value[field.prop]);
    };
    const inputEvent = (newV: any, prop: string) => {
      console.log("inputEvent", newV, prop);
    };
    const validate = (val: any, val2: any, val3: any) => {
      console.log("validate", val, val2, val3);
    };
    const disable = () => {
      formConfig.value?.setDisable("name", !formConfig.value.getDisable("name"));
      console.log(formConfig.value?.getDisable("name"));
    };
    const currentPage = ref(4);
    return {
      formConfig,
      formInfo,
      changeEvent,
      changeFileEvent,
      blurEvent,
      focusEvent,
      inputEvent,
      validate,
      disable,
      currentPage,
      handleSizeChange(val: any) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val: any) {
        console.log(`当前页: ${val}`);
      }
    };
  }
});
</script>
